<!DOCTYPE html>
<html lang="en">
{include file='Public:head'}
<body data-type="widgets">
<script src="/assets/js/theme.js"></script>

<style type="text/css">
    /* 微信气泡 */
    div.speech {
        float: left;
        margin: 10px 0;
        padding: 8px;
        table-layout: fixed;
        word-break: break-all;
        position: relative;
        background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) );
        border: 1px solid #989898;
        border-radius: 8px;
    }
    div.speech:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 15px;
        top: -20px;
        border: 10px solid;
        border-color: transparent transparent #989898 transparent;
    }
    div.speech:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 17px;
        top: -16px;
        border: 8px solid;
        border-color: transparent transparent #ffffff transparent;
    }
    div.speech.right {
        display: inline-block;
        box-shadow: -2px 2px 5px #CCC;
        margin-right: 10px;
        width:400px;
        float: right;
        background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) );
    }
    div.speech.right:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 9px;
        bottom: auto;
        left: auto;
        right: -10px;
        border-width: 9px 0 9px 10px;
        border-color: transparent #989898;
    }
    div.speech.right:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        bottom: auto;
        left: auto;
        right: -8px;
        border-width: 8px 0 8px 9px;
        border-color: transparent #bced50;
    }
    div .left {
        display: inline-block;
        box-shadow: 2px 2px 2px #CCCCCC;
        margin-left: 10px;
        width: 400px;
        position: relative;
        background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) );
    }
    div .left:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 9px;
        bottom: auto;
        left: -10px;
        border-width: 9px 10px 9px 0;
        border-color: transparent #989898;
    }
    div .left:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        bottom: auto;
        left: -8px;
        border-width: 8px 9px 8px 0;
        border-color: transparent #eae8e8;
    }
    .leftd {
        clear: both;
        float: left;
        margin-left: 10px;
    }
    .rightd {
        clear: both;
        float: right;
        margin-right: 10px;

    }

    .leftd_h{
        width: 39px;
        height: 39px;
        border-radius: 100%;
        display: block;
        float: left;
        overflow: hidden;
    }

    .leftd_h img{
        display: block;
        width: 100%;
        height: auto;
    }
    .rightd_h{
        width: 39px;
        height: 39px;
        border-radius: 100%;
        display: block;
        float: right;
        overflow: hidden;
    }

    .rightd_h img{
        display: block;
        width: 100%;
        height: auto;
        float: right;
        margin-top: 10px;
    }
</style>

<div class="am-g tpl-g">
    {include file='Public:header'}
    {include file='Public:menu2'}
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">评论回复</div>
                            <div class="widget-function am-fr">
                                <div class="navbar-form pull-right margin">
                                    <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default" data-original-title="返回"><i class="fa fa-reply"></i></a>
                                </div>
                            </div>
                            <div class="am-form-group" >
                                <h3 style="margin-left:20px;line-height: 42px;">用户评论</h3>
                            </div>
                            <div  class="am-form-group" style="width:658px;margin-left:200px;height: 128px;margin-top:-19px;">
                                <!--用户评论信息-->
                                <div class="leftd">
                                           <span ng-class="leftd_h">
                                                <img src="/img/timg.jpg" style="width: 40px;height:40px;float: left;margin-top: 10px;">
                                           </span>
                                    <div class="speech left" ng-class="speech left">
                                        {$comment.content}<br>
                                        {notempty name="$comment.img"}
                                        {foreach name="$comment.img" key="k" item="v"}
                                        <a href="{$v}"><img src="{$v}" alt="" style="width: 60px"></a>
                                        {/foreach}
                                        {/notempty}


                                    </div>
                                </div>
                                <!--//管理员回复-->
                                {foreach $admin_comment as $k=>$v}
                                <div class="rightd">
                                           <span ng-class="rightd_h">
                                                <img src="/img/timg.jpg"  style="width: 40px;height:40px;float: right;margin-top: 10px; "/>
                                           </span>
                                    <div class="speech right" ng-class="speech left">
                                        {$v.content}
                                    </div>
                                </div>
                                {/foreach}


                            </div>
                            <div class="box-footer">
                                <form id="roleform" action="{:url('addData')}" >
                                    <textarea style="width: 658px;height:100px;margin-left:200px;" class="form-control" rows="3" placeholder="请输入回复内容" name="content"></textarea>
                                    <div class="form-group">
                                        <input type="hidden" name="content_id" value="{$comment.comment_id}">
                                        <button type="button" onclick="roleSubmit()"  class="am-btn am-btn-secondary" style="margin-left:750px;margin-top: 20px;">
                                            <i class="icon-ok"></i>回复
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

            </div>
        </div>
    </div>
</div>
</div>
</body>
{include file='Public:script'}
<script>
    //提交
    function roleSubmit(){
        if($('[ name="content"]').val() == '' ){
            layer.alert('回复内容不能为空', {icon: 2});
            return false;
        }
        var form=document.getElementById("roleform");
        var formData=new FormData(form);
        $.ajax({
            url:"{:Url('addData')}",
            type:'POST',
            data:formData,
            async: false,
            cache: false,
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success:function(res){
                if (res.code != 200) {
                    layer.msg(res.msg, {shade: 0.5, time: 1000,icon: 2});
                    return false;
                }
                // window.location.href=document.referrer;
                window.location.reload();
                // layer.msg(res.msg, {shade: 0.5, time: 1000, icon: 1}, function(){
                // });
            }
        });
    }
</script>
</html>